<template>
  <div class="app-container">
    <div class="home">
        <div class="myUse">
          <div class="header">
            我的应用
          </div>
          <div class="content">
            <div class="application" v-for="(item, index) in applications" :key="item.name + index">
              <div class="application-title">
                {{item.name}}
              </div>
              <div class="application-content">
                <el-row :gutter="20">
                  <el-col :span="6" style="padding: 10px;" v-for="(app, i) in item.applications" :key="app.name + i">
                    <div class="application-content__item" @click.stop="goRouter(app)">
                      <div class="application-content__icon">
                        <svg-icon :icon-class="app.icon || 'list'"></svg-icon>
                      </div>
                      <div class="application-content__title">
                        {{app.name}}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="notification">
          <div class="header">
            通知公告
            <span v-if="noReadNum > 0" class="header-label"> {{noReadNum}} </span>
          </div>
          <div class="content">
            <div v-for="notice in noticeList" :key="notice.id" @click.stop="noticeClick(notice, 'info')" class="notification-item">
              <span class="notification-item-title" :title="notice.noticeTitle">
                <span>{{notice.readStatus=='0'? '未读':'已读'}}</span>：{{notice.noticeTitle}}
              </span>
              <span class="notification-item-time">{{notice.createTime}}</span>
            </div>
          </div>
        </div>
        <div class="waitWork">
          <div class="header">
            我的待办
          </div>
          <div class="content">
            <div class="waitWork-item" v-for="waitDone in waitDoneList" @click.stop="noticeClick(waitDone, 'wait')" :key="waitDone.id">
              <div class="waitWork-item-icon"></div>
              <div class="waitWork-item-text">
                {{waitDone.noticeTitle}}
                <span class="waitWork-item-text-time">{{waitDone.createTime}}</span>
              </div>
            </div>
          </div>
        </div>
    </div>

    <el-dialog 
     :title="title" 
     :visible.sync="noticeVisible" 
     width="1200px" 
     append-to-body>
      <div class="noticeContent-title">
        {{noticeData.noticeTitle}}
      </div>
      <div class="noticeContent-time">
        创建人：{{noticeData.createBy}}
        创建时间：{{noticeData.createTime}}
      </div>
      <div class="noticeContent-editor" v-html="noticeData.noticeContent">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noticeVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { 
  getNoReadNum,
  getMyNotice,
  noticeUpdateStatus
 } from "@/api/system/notice"
import { getNotice } from "../api/system/notice";
import path from 'path'
import { isExternal } from '@/utils/validate'
export default {
  components: {  },
  data() {
    return {
      noReadNum: 0,
      noticeList:[],
      title: '通知',
      noticeVisible: false,
      noticeData: '',
      waitDoneList:[],
      asda:[{
        alwaysShow:true,
        children:[{
          hidden: false,
          meta:{
            icon:"build",
            link:'',
            noCache:false,
            title:"学生信息"
          },
          name:"StudentInfo",
          path:"studentInfo"
        }],
        hidden: false,
        meta:{
          icon:"documentation",
          link:'',
          noCache:false,
          title:"基础数据"
        },
        name: "/information",
        path: "//information",
        redirect:"noRedirect"
      }]
    };
  },
  created () {
    this.getNoReadNotice()
    this.getNotice()
    console.log(this.sidebarRouters, 'this.sidebarRouters')
  },
  computed: {
    ...mapGetters(["sidebarRouters"]),
    applications() {
      return this.sidebarRouters.reduce((arr, item) => {
        console.log(item)
        if (typeof item.hidden === 'boolean' &&  !item.hidden) {
          let _application = {
            name: item.meta && item.meta.title,
            applications: []
          }
          if (item.children && item.children.length > 0) {
            item.children.forEach((childrenItem) => {
              if (typeof childrenItem.hidden === 'boolean' &&  !childrenItem.hidden && !childrenItem.children) {
                let _params = this.resolvePath(item.path, childrenItem.path, childrenItem.query);
                console.log(_params)
                let _obj = {
                  name: childrenItem.meta && childrenItem.meta.title,
                  icon: childrenItem.meta && childrenItem.meta.icon,
                  routerName: childrenItem.name,
                  path: '',
                  query: {}
                }
                if (typeof _params === 'string') {
                  _obj.path = _params
                } else {
                  _obj.path = _params.path
                  _obj.query = _params.query
                } 
                _application.applications.push(_obj)
              } else if (childrenItem.children && childrenItem.children.length > 0) {
                this.getChildren(_application.applications, childrenItem.children, this.resolvePath(item.path, childrenItem.path))
              }
            })
          }
          arr.push(_application)
        }
        return arr
      }, [])
    }
  },
  
  methods: {
    getChildren(arr, items, _basepath) {
      console.log(_basepath)
      console.log(this.resolvePath('', "//information"), 'lkjlkj')
      items.forEach((childrenItem) => {
        if (typeof childrenItem.hidden === 'boolean' &&  !childrenItem.hidden && !childrenItem.children) {
          let _params = this.resolvePath(_basepath, childrenItem.path, childrenItem.query)
          console.log(_params)
          let _obj = {
            name: childrenItem.meta && childrenItem.meta.title,
            icon: childrenItem.meta && childrenItem.meta.icon,
            routerName: childrenItem.name,
            path: '',
            query: {}
          }
          if (typeof _params === 'string') {
            _obj.path = _params
          } else {
            _obj.path = _params.path
            _obj.query = _params.query
          } 
          arr.push(_obj)
        } else if (childrenItem.children && childrenItem.children.length > 0) {
          this.getChildren(arr, childrenItem.children, this.resolvePath(_basepath, childrenItem.path))
        }
      })
    },
    resolvePath(basePath, routePath, routeQuery) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(basePath)) {
        return basePath
      }
      if (routeQuery) {
        let query = JSON.parse(routeQuery) || {};
        return { path: path.resolve(basePath, routePath), query: query }
      }
      return path.resolve(basePath, routePath)
    },
    goRouter(app){
      console.log(app, 'app')
      this.$router.push({path: app.path, query: app.query})
    },
    getNoReadNotice(){
      this.waitDoneList = []
      this.noticeList = []
      this.noReadNum = 0
      getNoReadNum().then((res)=>{
        if (Object.prototype.toString.call(res.data) == '[object Number]') {
          this.noReadNum = res.data
          if (res.data) {
            this.getNotice(res.data)
          }
        }
      })
    },
    // 获取未读通知公告以及我的待办
    getNotice(size){
      getMyNotice({
        pageNum: 1,
        pageSize: size,
        readStatus: "0"
      }).then((res)=>{
        let waits = []
        let notices = []
        res.rows.forEach(element => {
          if (element.noticeType == '3') {
            waits.push(element)
          } else {
            notices.push(element)
          }
        });
        this.waitDoneList = waits
        this.noticeList = notices
      })
    },
    noticeClick(item, type){
      if (type == 'info') {
        this.noticeVisible = true
        this.noticeData = item
        if (item.noticeType == '1') {
          this.title = '通知'
        } else {
          this.title = '公告'
        }
      }
      if (type == 'wait') {
        if (item.noticeParam) {
          const _noticeParam = JSON.parse(item.noticeParam)
          if (_noticeParam.rate && _noticeParam.titleType) {
            this.$router.push({
              name:'WorkLog', 
              params:{
                rate: _noticeParam.rate,
                titleType: _noticeParam.titleType
              }
            })
          }
        }
      }
      if (item.id) {
        noticeUpdateStatus({
          id:item.id,
          readStatus:"1"
        }).then((res)=>{
          this.getNoReadNotice()
        })
      }
    }
  }
};
</script>
<style lang="scss" scoped>
  .app-container{
    height: calc(100vh - 50px);
  }
  .hasTagsView {
    .app-container {
      height: calc(100vh - 84px);
    }
  }
  .home{
    height: 100%;
    display: flex;
    .myUse{
      flex: 1;
      border:1px solid #ebeef5;
    }
    .notification{
      width: 300px;
      border:1px solid #ebeef5;
      &-item{
        width: 100%;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        align-items: center;
        &-title{
          width: calc(100% - 115px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
        &-time{
          width: 115px;
          text-align: right;
        }
      }
    }
    .waitWork{
      width: 300px;
      border:1px solid #ebeef5;
      &-item{
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        align-items: center;
        &-icon{
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #e6a23c;
        }
        &-text{
          padding-right: 100px;
          width: calc(100% - 15px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &-time{
            margin-right: -100px;
          }
        }
      }
    }
    .header{
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      padding: 0 10px;
      &-label{
        height: 18px;
        border-radius: 6px;
        background-color: red;
        min-width: 14px;
        line-height: 18px;
        text-align: center;
        color: #efe3e3;
        margin-left: 8px;
      }
    }
    .content{
      height: calc(100% - 30px);
      overflow-y: auto;
      padding: 8px 10px;
    }
  }
  .noticeContent{
    &-title{
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
    }
    &-editor{
      overflow: auto;
      height: 500px;
    }
    &-time{
      text-align: right;
      height: 20px;
      line-height: 20px;
    }
  }
  .application{
    width: 100%;
    padding-bottom: 10px;
    &-title{
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }
    &-content{
      &__icon{
        height: 70px;
        font-size: 38px;
        line-height: 70px;
        text-align: center;
      }
      &__title{
        text-align: center;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
      }
      &__item{
        border: 1px solid #ebeef5;
        cursor: pointer;
      }
    }
  }
</style>